<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人主页</title>
    <link rel="shortcut icon" href="wo.jpg">
    <link rel="stylesheet" href="tpjl.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #nar-bar {
            position: fixed;
            width: 100%;
            height: 50px;
            padding: 5px;
            background-color: lightgray;
        }

        #nar-bar ul {
            list-style: none;
        }

        #nar-bar ul li:hover {
            background-color: red;
            cursor: pointer;
        }

        #nar-bar ul li {
            float: left;
            margin: 0 10px;

        }

        #nar-bar ul li a {
            text-decoration: none;

        }

        .clear-fix::after {
            content: "";
            display: block;
            clear: both;
        }

        #banner {
            height: 400px;
            background-image: url(timg.jpg);
            background-size: 1920px 400px;
            background-position: 50% 50%;
        }

        #main {
            width: 1000px;
            margin: 0 auto;
            margin-bottom: 40px;
        }

        #title {
            padding-top: 60px;
            text-align: center;
            font-size: 24px;
        }

        .line {
            text-indent: 2em;
            color: #666666;
        }

        .pic {
            width: 100%;
        }

        .subtitle {
            padding-top: 65px;
            color: #333333;
        }

        .subtitle1 {
            text-align: center;
        }

        .A {
            color: #333333;
            font-family: "宋体";
            text-decoration: none;
        }

        .strong {
            color: red;
            background-color: yellow;
        }

        .box1 {
            position: relative;
            left: 580px;
            top: -30px;
            width: 25px;
            height: 25px;
            z-index: -1;
            /* border: solid 1px black; */
        }

        .box2 {
            position: relative;
            left: 80px;
            top: -27px;
            width: 30px;
            height: 30px;
            z-index: -1;
            /* border: solid 1px black; */
        }
        
    </style>
</head>

<body>
    <nav id="nar-bar">
        <ul>
            <li>
                <a href="#title">郝志杰的主页</a>
            </li>
            <li>
                <a href="#xx">我的学校</a>
            </li>
            <li>
                <a href="#jx">我的家乡</a>
            </li>
            <div class="clear"></div>
        </ul>
    </nav>
    <div id="banner"></div>
    <div id="main">
        <h1 id="title">
            <a class="A" href="自我介绍.html" target="_blank">郝志杰的主页</a>
            <div class="box1 clock"></div>
        </h1>
        <div>

            <div id="xx">
                <h3 class="subtitle">
                    <a class="A" href="http://www.hnjd.edu.cn/" target="_blank">我的学校</a>
                    <div class="box2 school"></div>
                </h3>

                <p class="line">河南机电职业学院是省教育厅直属、公办全日制高等院校。学院始建于1953年，坐落于郑州南大学城，占地面积782.4亩，建筑面积40万平方米，教学仪器设备总值2.1亿元， 图书35万册。学院下设13个二级学院，开设43个专业，与洛阳理工学院联合开设机械设计制造及其自动化等4个本科专业。学院现有专兼职教师586人，其中教授、副教授116人，
                    博士学位教师30人，90%以上的青年教师具有硕士以上学位，“双师型”教师占全院专业课教师的98%，在校生12000人。
                </p>
                <img class="pic" src="daxue.jpg" alt="">
            </div>
            <div id="jx">
                <h3 class="subtitle">我的家乡<div class="box2 home"></div></h3>
                
                <h4 class="subtitle1">
                    <a class="A" href="http://www.thdxg.net/" target="_blank">百里画廊————太行山大峡谷</a>
                </h4>
                <p class="line">林州大峡谷即太行大峡谷，位于河南省最北部的林州市境内，南太行的东麓。是国家重点风景名胜区、国家AAAAA级旅游区、河南省十佳风景名胜区、全国农村商业战线上的一面旗——石板岩供销社“扁担精神”的发祥地，是太行山的儿子—谷文昌同志的故乡，是中国文联书画中心的创作培训基地。
                    因为他坐落于林州，所以也叫林州大峡谷、林州太行大峡谷。
                </p>
                <img class="pic" src="taihangshan.jpg" alt="">
                <p class="line">自然景观和人文景观资源十分丰富。断崖高起，群峰峥嵘，阳刚劲露，台壁交错，苍溪水湍，流瀑四挂，峰、峦、台、壁、峡、瀑、嶂、泉姿态万千，是“北雄风光”的典型代表，号称“百里画廊”。</p>

                <h4 class="subtitle1">
                    <a class="A" href="http://www.hqq.org.cn/" target="_blank">人工天河————红旗渠</a>
                </h4>
                <p class="line">上世纪60年代，十万开山者，历时十年，绝壁穿石，挖渠千里，把中华民族的一面精神之旗，插在太行之巅。</p>
                <p class="line"> 在具有”北雄风光最胜处”的太行山上，红旗渠像一条蓝色飘带缠绕其间。其工程之艰巨，工程美学价值之高，堪称人间奇迹，形成了独一无二的红旗渠风光。</p>
                <img class="pic" src="hongqiqu.jpg" alt="">
                <p class="line">红旗渠精神的内容是：
                    <span class="strong">自力更生、艰苦创业、团结协作、无私奉献。</span>
                </p>

                <h4 class="subtitle1">
                    <a class="A" href="https://baike.baidu.com/item/%E4%B8%87%E6%B3%89%E6%B9%96/7862001?fr=aladdin" target="_blank">山青水秀————万泉湖</a>
                </h4>
                <p class="line">万泉湖风景区位于林州市南部的淇、淅河交汇处。是国家AAAA级旅游景区，这里有淇淅河国家湿地公园，有豫北最大的涌泉群——石门涌泉。 [1] 大小泉眼数不胜数，生生不息，汇流成了一条波光粼粼的泱泱湖泊——故名万泉湖。
                    [1] 《诗经》中采自淇水的诗篇就有44篇，这里有石门古寺，神龟探水、碧波 亭、慕景椿、凌波栈道等许多景点。自然风光与人文景观相结合， 是集观光、休闲、娱乐、度假于一体的理想旅游观光胜地。>
                </p>
                <img class="pic" src="wanquanhu.jpg" alt="">
            </div>
        </div>
    </div>
</body>

</html>